.previewContainer {
  display: flex;
  width: 100%;
  flex: 1 1;
  flex-direction: column;
  background-color: $preview-backgroundColor;
  color: $preview-color;
}

.previewTitles {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  background-color: $tab-titles-backgroundColor;
  border-bottom: 0.2rem $tab-titles-borderColor solid;
  padding-top: 0.1rem;
  min-height: 2rem;
}

.previewTitle {
  position: relative;
  flex: 0;
  /*flexbox workaround some browsers (mostly Safari) needs to have some properties defined explicitly to handle auto sizing correctly*/
  flex-basis: auto;
  flex-shrink: 0;
  /*end flexbox workaround*/
  /*max-width is needed here to ensure the titles does not overflow its container is collapsed*/
  max-width: 100%;
  min-height: 1.7rem;
  white-space: nowrap;
  display: flex;
  background-color: $tab-title-backgroundColor;
  padding: 0.3rem 0.9rem 0.3rem 0.9rem;
  border-right: 1px $tab-title-borderColor solid;
  cursor: pointer;
  font-size: 0.9rem;
  user-select: none;
}

.previewTitle.active {
  background: $tab-title-active-backgroundColor;
  color: $tab-title-active-color;
}

.previewTitle:hover {
  background: $tab-title-hover-backgroundColor;
  color: $tab-title-hover-color;
}

.previewTitleIcon {
  font-size: 0.9em;
  margin-right: 2px;
}

.previewContent {
  position: relative;
}

.profileOperations {
  position: relative;
  width: 100%;
  height: 100%;
}

.profileOperations :global(.react-flow__edge-text) {
  fill: $primary-color;
}

.profileOperations :global(.react-flow__node-default),
.profileOperations :global(.react-flow__edge-text) {
  font-size: 12px;
}

.profileButtonAction {
  cursor: pointer;
  font-size: 0.8rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

.profileOperationNode {
  cursor: pointer !important;
  border-radius: 1px !important;
}

.profileStandardNodeContent {
  word-break: break-all;
}

.profileStartNode {
  cursor: pointer !important;
  width: 50px !important;
  border-radius: 50% !important;
}

.profileStartNodeLabel {
  margin-right: -2px;
}

.profileEndNode {
  width: 70px !important;
  border-radius: 50% !important;
}

.profileEndNode.renderError {
  width: 35px !important;
}

.profileEndNodeLabel {
  font-size: 1rem;
  color: #ff0000;
}

.profileStartNode :global(.react-flow__handle),
.profileOperationNode :global(.react-flow__handle) {
  opacity: 0 !important;
}

.profileOperationNode.active {
  outline: 2px solid $primary-selection-backgroundColor;
}

.profileOperationNode.running {
  animation: runningBlinker 0.7s linear infinite;
}

.profileOperationNode.error {
  border: 1px solid #ff0000;
}

.profileOperationNode.error:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #ff0000;
  opacity: 0.7;
  z-index: -1;
}

@keyframes runningBlinker {
  50% {
    opacity: 0.3;
  }
}

:global(#react-flow__arrowclosed-active) > * {
  stroke: $primary-selection-backgroundColor !important;
  fill: $primary-selection-backgroundColor !important;
}

.profileOperationEdge :global(.react-flow__edge-path) {
  cursor: pointer;
  stroke-width: 2;
}

.profileOperationEdge .profileOperationEdgeExpander {
  stroke-width: 40;
  stroke-opacity: 0;
}

.profileOperationEdge.active .main {
  stroke: $primary-selection-backgroundColor !important;
  marker-end: url("#react-flow__arrowclosed-active") !important;
}

.profileLogs {
  width: 100%;
  overflow: auto;
  height: 100%;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.profileLogItem {
  display: flex;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
  align-items: baseline;
  border-bottom: 1px dashed transparent;
  /* tweak to have full background colors
  value should be the same as profilerLogs padding-left, right  */
  margin-left: -0.4rem;
  margin-right: -0.4rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.profileLogItem.standard {
  background-color: $profile-log-backgroundColor;
  color: $profile-log-color;
}

.profileLogItem.alternative {
  background-color: $profile-log-alternative-backgroundColor;
  color: $profile-log-alternative-color;
}

.profileLogItem:last-child {
  margin-bottom: 0;
}

.profileLogs.active .profileLogItem:not(.active) {
  opacity: 0.6;
}

.profileLogItem.active {
  opacity: 1 !important;
  border-bottom: 1px dashed $primary-selection-backgroundColor;
}

.profileLogItemLevel {
  min-width: 3.2em;
  max-width: 3.2em;
  margin-right: 0.3rem;
}

.profileLogItemLevel.debug {
  color: #3636ef;
}

.profileLogItemLevel.info {
  color: #008000;
}

.profileLogItemLevel.warn {
  color: #b1b112;
}

.profileLogItemLevel.error {
  color: #ff0000;
}

.profileLogItemTime {
  font-size: 0.8em;
  color: #a57337;
  min-width: 3.6em;
  max-width: 3.6em;
  margin-right: 0.5rem;
}

.profileLogItemMessage {
  flex-grow: 1;
  word-break: break-all;
  white-space: break-spaces;
}

.profileLogItemLevel.userLevel,
.profileLogItemMessage.userLevel {
  color: #1fdede;
}

.profileLogItemLevel,
.profileLogItemTime {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.profileLogItemLevel,
.profileLogItemTime,
.profileLogItemMessage {
  font-family: monospace;
}

.profileExecutionTime {
  position: absolute;
  left: 50%;
  bottom: calc(-50% - 5px);
}

.profileExecutionTimeCover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-50% - 5px);
}

.profileExecutionTimeLabel {
  white-space: nowrap;
  display: inline-block;
  color: $primary-color;
  transform: translateX(-50%);
  text-shadow: -1px 0 $primary-backgroundColor, 0 1px $primary-backgroundColor,
    1px 0 $primary-backgroundColor, 0 -1px $primary-backgroundColor;
}

.profileExecutionTimeCost {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-50% - 5px);
}

.profileExecutionTimeCost.low {
  background-color: #22b14c;
  opacity: 0.8;
}

.profileExecutionTimeCost.medium {
  background-color: #f9e127;
  opacity: 0.8;
}

.profileExecutionTimeCost.high {
  background-color: #fa7f27;
  opacity: 0.8;
}

.errorModal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: $modal-overlay-backgroundColor;
  z-index: 10;
  opacity: 1;
}

.errorModalContent {
  background-color: $modal-backgroundColor;
  box-shadow: 1rem 1rem 1rem 0 $modal-shadowColor;
  color: $modal-color;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  z-index: 11;
  font-weight: 200;
  min-width: 30%;
  border-radius: 0.1rem;
  overflow: auto;
  padding: 1.5rem;
  max-width: 80%;
  max-height: 80%;
}
